<template>
    <div :style="{'max-height': codeContainerHeight,'overflow': 'auto'}">
        <v-list v-if="codeHtml == null" class="py-2" color="primary" elevation="12" rounded="lg">
            <v-list-item prepend-icon="$vuetify-outline" title="正在加载代码">
                <template v-slot:prepend>
                    <div class="pe-4">
                        <v-icon color="primary" size="x-large"></v-icon>
                    </div>
                </template>
                <template v-slot:append>
                    <v-progress-circular color="primary" indeterminate="disable-shrink" size="16"
                        width="2"></v-progress-circular>
                </template>
            </v-list-item>
        </v-list>
        <div v-else>
            <p><strong>资源ID：</strong>{{ resourceId }}</p>
            <p><strong>文件路径：</strong>{{ filePath }}</p>
            <highlightjs :language='language' :code="codeHtml" />
        </div>
    </div>
</template>

<script>
import { getPageResource,getResourceFromMinIO } from '@/api/adminResource';

import 'highlight.js/styles/atom-one-dark.css';
import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import json from 'highlight.js/lib/languages/json';
import html from 'highlight.js/lib/languages/xml';
hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('json', json);
hljs.registerLanguage('html', html);

export default {
    name: 'ShowCodeComponent',
    props:{
        codeContainerHeight:{
            type:String,default:'500px'
        }
    },
    components: {},
    data() {
        return {
            codeHtml: null,
            language: 'html',
            filePath: '',
            resourceId:''
        }
    },
    mounted() { },
    methods: {
        getWordPageResource(word) {
            getPageResource(word).then(resp => {
                if (resp.data == null) {
                    resp.data = '文件不存在'
                    this.renderCode(JSON.stringify(resp), 'json')
                    return
                }
                this.filePath = resp.data.absolutePath
                if (resp.data.html != null) {
                    this.resourceId=resp.data.id
                    setTimeout(() => {
                        this.renderCode(resp.data.html, resp.data.fileType)
                    }, 200);
                }else if(resp.data.fileSystem=='MINIO'){
                    setTimeout(()=>{
                        getResourceFromMinIO(resp.data.absolutePath).then(response=>{
                            this.renderCode( resp.data.fileType == 'json' ?JSON.stringify(response.data):response.data, 
                                resp.data.fileType)
                        })
                    },200)
                }
            })
        },
        renderCode(code, language) {
            this.codeHtml = language == 'json' ? JSON.stringify(JSON.parse(code), null, '\t') : code
            this.language = language
        }
    }
}
</script>

<style></style>